<%--
  Created by IntelliJ IDEA.
  User: 70481
  Date: 2019/9/10
  Time: 19:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--引入shiro的便签库--%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>轮播图管理</title>
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" rel="stylesheet" type="text/css">
</head>
<body>
<table id="myTable" lay-filter="myTable" class="layui-hide"></table>


<form class="layui-form" action="" id="myForm" lay-filter="myForm" style="display: none;" method="post" enctype="multipart/form-data">
<%--隐藏输入框--%>
    <input type="hidden" name="bannerId" id="hidd" value="">
    <div class="layui-form-item">
        <label class="layui-form-label">图片标题</label>
        <div class="layui-input-block">
            <input type="text" name="bannerOldName" id="bannerOldName" lay-verify="required" lay-reqtext="这是必填项，不能为空!  " placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>



    <div class="layui-form-item">
        <label class="layui-form-label">上传时间</label>
        <div class="layui-input-block">
            <input type="text" id="myTime" name="bannerTime" lay-verify="required" lay-reqtext="这是必填项，不能为空!  " placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">是否显示</label>
        <div class="layui-input-block">
            <input type="radio" name="bannerState" value="2" title="显示">
            <input type="radio" name="bannerState" value="0" title="不显示">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">上传图片</label>
        <div class="layui-input-block">
            <input type="file" id="fileImg" name="bannerImg"  placeholder="请上传" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label"></label>
        <div>
            <img src="" width="120px"  height="100px" id="myImg">
        </div>
    </div>

<%--    <div class="layui-form-item">
        <label class="layui-form-label">上传图片</label>
        <div class="layui-input-inline">
            <div class="layui-upload-drag" id="test10">
                <i class="layui-icon"></i>
                <p>点击上传，或将文件拖拽到此处</p>
            </div>
        </div>
        <div class="layui-input-inline" style="width: 250px; height: 153px">
            <img src="" id="myImg" style="width: 100%;height: 100%">
        </div>
    </div>--%>


    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">图片描述</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" class="layui-textarea" id="bannerDesc" name="bannerDesc"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit lay-filter="submission" id="submission">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>


</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>

<script type="text/javascript">


    //加载需要的模块
    layui.use(["table","form","layer","laydate"],function () {
        var form = layui.form;
        var layer = layui.layer;
        var laydate=layui.laydate;
        var table = layui.table;

        laydate.render({
            elem:"#myTime",
            format:"yyyy-MM-dd HH:mm:ss"
        })



        // 初始化表格
        table.render({
            elem:"#myTable",
            url:"${pageContext.request.contextPath}/banner/selectBannerPage",
            page:true,
            toolbar:"#barDemo",
            defaultToolbar:[],
            cols:[[
                // 每一个大括号代表一行数据
                {checkbox:"checkbox"},
                {title:"编号",field:"bannerId",width:40},
                {title:"图片",field:"bannerImgUrl",templet: '#bannerImg'},
                {title:"轮播图名称",field:"bannerOldName"},
                {title:"状态",field:"bannerState",templet: '#bannerStare'},
                {title:"上传时间",field:"bannerTime"},
                {title:"图片描述",field:"bannerDesc"},
                {title:"操作",templet:"#os"}
            ]]
        })

        // 头监听

        table.on("toolbar(myTable)",function (obj) {
            $("#hidd").val("")
            $("#myImg").prop("src","${pageContext.request.contextPath}/img/default.jpg")
            $("#myForm")[0].reset();
            if(obj.event==="add"){
                layer.open({
                    type: 1,
                    offset: "t",
                    anim: 1,
                    area:'600px',
                    content: $("#myForm")
                })
            }
        })

        // form监听
        form.on("submit(submission)",function(data){
            // alert(234)
            var formData = new FormData(document.getElementById("myForm"));
            console.log(formData.get("bannerOldName"))

            if($("#hidd").val()===""){
                $.ajax({
                    url:"${pageContext.request.contextPath}/banner/upload",
                    type:"post",
                    data:formData,
                    async:false,
                    cache:false,
                    processData:false,
                    contentType:false,
                    success:function(data){
                        layer.alert(data.isInsert,{time:1250})
                        layer.closeAll("page")
                        table.reload("myTable")
                    }
                })
            }else{
                $.ajax({
                    url:"${pageContext.request.contextPath}/banner/updateBanner",
                    type:"post",
                    data:formData,
                    async:false,
                    cache:false,
                    processData:false,
                    contentType:false,
                    success:function(data){
                        layer.alert(data.isUpdate,{time:1250})
                        layer.closeAll("page")
                        table.reload("myTable")
                    }
                })
            }
            return false;
        })
    })


    //建立一個可存取到该file的url  用于文件上传的图片回显
    function getObjectURL(file) {
        var url = null ;
        // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
    //图片上传回显
    $("#fileImg").change(function () {
        var objurl = getObjectURL(this.files[0])
        if (objurl) {
            $("#myImg").attr("src", objurl)
        }
    })


    function update(obj) {
        $("#myForm")[0].reset();
        // alert(data)
        // 会后台查数据
        $.ajax({
            url:"${pageContext.request.contextPath}/banner/selectById",
            data:{"bannerId":obj},
            success:function (data) {
                console.log(data)
                // 图片路径
                layui.use(["form","layer"],function () {
                    var form = layui.form;
                    var layer=layui.layer;
                    $("#myImg").prop("src","${pageContext.request.contextPath}/"+data.bannerImgUrl+"")
                    form.val("myForm",{
                        bannerId:data.bannerId,
                        bannerOldName:data.bannerOldName,
                        bannerDesc:data.bannerDesc,
                        bannerState:data.bannerState,
                        bannerTime:data.bannerTime
                    });
                });

                layer.open({
                    type: 1,
                    offset: "t",
                    anim: 1,
                    area:'600px',
                    content: $("#myForm")
                })
            }
        })

    }
    function dele(obj) {
        var layer = layui.layer;
        var table = layui.table;
        $.ajax({
            url:"${pageContext.request.contextPath}/banner/deleteBanner",
            data:{"bannerId":obj},
            success:function(data){
                layer.alert(data.isDelete,{time:1250});
                layer.closeAll("page")
                table.reload("myTable")
            }
        })
    }


    <%--layui.use(["upload","layer","table"],function () {--%>
    <%--    var $ = layui.jquery,upload = layui.upload;--%>
    <%--    var table = layui.table;--%>
    <%--    var layer = layui.layer;--%>
    <%--    //普通图片上传--%>
    <%--    var uploadInst = upload.render({--%>
    <%--        elem: '#test10',--%>
    <%--        url: '${pageContext.request.contextPath}/banner/updateBanner',--%>
    <%--        data:{--%>
    <%--            bannerId:function(){--%>
    <%--                return $("#hidd").val();--%>
    <%--            },--%>
    <%--            bannerOldName:function(){--%>
    <%--                return $("#bannerOldName").val();--%>
    <%--            },--%>

    <%--            bannerState:function(){--%>
    <%--                return  $("[name='bannerState']:checked").val()--%>
    <%--            },--%>
    <%--            bannerDesc:function () {--%>
    <%--                return $("#bannerDesc").val()--%>
    <%--            }--%>
    <%--        },--%>
    <%--        auto:false,--%>
    <%--        bindAction:"#submission"--%>
    <%--        ,choose: function(obj){--%>
    <%--            // alert(123)--%>
    <%--            //预读本地文件示例，不支持ie8--%>
    <%--            obj.preview(function(index, file, result){--%>
    <%--                $('#myImg').attr('src', result); //图片链接（base64）--%>
    <%--            });--%>
    <%--        }--%>
    <%--        ,done: function(res){--%>
    <%--            //如果上传失败--%>
    <%--            if(res.code > 0){--%>
    <%--                return layer.msg('上传失败',{time:1250});--%>
    <%--            }else{--%>
    <%--                //上传成功，刷新表单--%>
    <%--                table.reload("myTable")--%>
    <%--                layer.msg("上传成功",{time:1250});--%>
    <%--            }--%>
    <%--        }--%>
    <%--    });--%>
    <%--})--%>

</script>

<script type="text/html" id="bannerImg">
    <img src="${pageContext.request.contextPath}/{{d.bannerImgUrl}}" width="100%" height="100%">
</script>

<script type="text/html" id="bannerStare">
    {{#  if(d.bannerState == 2){ }}
    显示
    {{#  } else { }}
    不显示
    {{#  } }}
</script>

<%--表头信息--%>
<script type="text/html" id="barDemo">
<%--标签验证:没有响应的权限的看不到对应的功能按钮--%>
<%--shiro标签库支持在前端页面jsp上进行便签验证,在jso编译的时候,标签会被解释成java代码去进行权限校验--%>
<%--有权限的用户访问,这段代码才会被解析,没有权限的管理员,不会通过权限验证,那么这段代码就不会被解析出来,--%>
<%--就是说没有权限的管理员的页面上看源码是看不到这个东西的--%>
    <shiro:hasPermission name="banner:create">
        <button type="button" class="layui-btn  layui-btn-sm layui-btn-radius layui-btn-normal" lay-event="add">
            <i class="layui-icon layui-icon-add-circle-fine"></i>上传</button>
    </shiro:hasPermission>

    <button type="button" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" lay-event="multi">
        <i class="layui-icon layui-icon-delete"></i>批量删除</button>
</script>

<script type="text/html" id="os">
    <%--同样的没有修改权限的管理员是看不到修改的按钮的,也就没有办法进行操作--%>
    <shiro:hasPermission name="banner:delete">
        <button type="button" class="layui-btn  layui-btn-sm layui-btn-radius layui-btn-normal" lay-event="update" id="update" onclick="update('{{d.bannerId}}')">
            <i class="layui-icon layui-icon-util"></i>修改</button>
    </shiro:hasPermission>

    <button type="button" class="layui-btn layui-btn-sm layui-btn-danger layui-btn-radius" lay-event="delete"  onclick="dele('{{d.bannerId}}')">
        <i class="layui-icon layui-icon-delete"></i>删除</button>
</script>


</html>
